<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<script type="text/javascript" src="js/vue.global.prod.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<body>
<h2>标准化信息管理</h2>
<div id="vote">
    <form method="get">
        <div><input v-model="name"/><span>
            <button type="submit" @click="created">提交检索</button></span>
            <span><a href="insert.html">新增标准</a></span>
            <button @click="deleteAll"> 删除标准</button>
        </div>
    </form>
    <!--    <p>{{page}}</p>-->
    <table>
        <tr>
            <td><input @change="allchange" id="all" v-model="all" type="checkbox"/></td>
            <td>标准号</td>
            <td>中文名称</td>
            <td>版本</td>
            <td>发布日期</td>
            <td>实施日期</td>
            <td>操作</td>
        </tr>
        {{id}}{{all}}
        <tr v-for="itme in page.content">
            <td><input @change="changeId" type="checkbox" name="checbox" v-model="id" :value="itme.id"/></td>
            <td>{{itme.name}}</td>
            <td>{{itme.zhname}}</td>
            <td>{{itme.version}}</td>
            <td>{{itme.keys}}</td>
            <td>{{itme.ksdate}}</td>
            <td>{{itme.jsdate}}</td>
            <td>{{itme.shishireqi}}</td>
            <td><a :href="'update.html?id='+itme.id">修改</a></td>
            <td><a :href="'ss.xls'">下载</a></td>
        </tr>


    </table>
    <button @click="jjk">首页</button>
    <button @click="jaingjiang">上一页</button>
    <button @click="jiajia">下一页</button>
    <button @click="ttt">尾页</button>

</div>

</body>

<script type="text/javascript">
    const App = {
        data() {
            return {
                page: '',
                name: "",
                pageindex: 1,
                pageTotal:0,
                id: [],
                all: 'false'
            }
        },

        methods: {
            created(e) {
                e.preventDefault();
                let me = this;
                axios.get("/api/selectAll?name=" + this.name)
                    .then(function (response) {
                        me.page = response.data;
                        // me.pageindex=response.data
                        // alert(response.data);
                    })
            },
            changeId() {
                var checbox = document.getElementsByName("checbox");
                var strLen = checbox.length;
                checbox.forEach(item => {
                    console.log(item.value);
                })
                if (this.id.length < strLen) {
                    this.all = false;
                }


            },
            allchange() {
                var checbox = document.getElementsByName("checbox");
                var strLen = checbox.length;
                if (this.id != '') {
                    checbox.forEach(item => {
                        this.id.splice(item, strLen);
                    })
                }


                if (this.all == true) {
                    checbox.forEach(item => {
                        this.id.push(parseInt(item.value));
                    })
                }
                if (this.all == false) {
                    checbox.forEach(item => {
                        this.id.splice(item, strLen);
                    })
                }
            },
            deleteAll(e) {
                e.preventDefault();
                let params = new URLSearchParams();
                //发送参数
                params.append("id", this.id)
                axios.post("/api/delete",params).then(function (response) {
                        alert(1);
                    })
            },
            // xia(){
            //     let params = new URLSearchParams();
            //     //发送参数
            //
            //     params.append("name",this.name)
            //     params.append("pageindex", this.pageindex+1)
            //     axios({
            //         method: 'get',
            //         url: '/api/selectAll',
            //         params: params
            //     })
            //         .then((response) => {
            //             console.log(response.data)
            //             this.page = response.data;
            //             this.pageindex = response.data.number;
            //             alert(this.pageindex)
            //             this.id=[];
            //         });
            // }
            jjk(e){
                e.preventDefault();
                this.pageindex=1
                axios.get("/api/selectAll?name="+this.name+"&pageindex="+this.pageindex)
                    .then((response)=>{
                        this.page=response.data;
                    })

            }
            ,
            ttt(e){
                e.preventDefault();
                this.pageindex=this.page.totalPages
                axios.get("/api/selectAll?name="+this.name+"&pageindex="+this.pageindex)
                    .then((response)=>{
                        this.page=response.data;
                    })
            },
            jiajia(e){
                e.preventDefault();
                ++this.pageindex
                if(this.pageindex>this.page.totalPages){
                    this.pageindex--
                }
                axios.get("/api/selectAll?name="+this.name+"&pageindex="+this.pageindex)
                    .then((response)=>{
                        this.page=response.data;
                    })
            },
            jaingjiang(e){
                e.preventDefault();
                this.pageindex--
                if(this.pageindex==0){
                    this.pageindex++
                }
                axios.get("/api/selectAll?name="+this.name+"&pageindex="+this.pageindex)
                    .then((response)=>{
                        this.page=response.data;
                    })
            }
        },
        created() {
            let me = this;
            axios.get("/api/selectAll")
                .then(function (response) {
                    me.page = response.data;
                    console.log(response.data);
                    this.pageindex=response.data.number;
                    this.pageTotal=response.data.totalPages;
                })
        },

        jjk() {
            let me = this;
            axios.get("/api/selectAll")
                .then(function (response) {
                    me.page = response.data;
                })
        }

    };
    Vue.createApp(App).mount('#vote');
</script>
</html>